<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		:root {
			--black: rgb(22, 22, 22);
			--white: rgb(245, 245, 245);
			--blueish: #f09da1;
		}

		*,
		*:before,
		*:after {
			box-sizing: inherit;
		}

		html {
			height: 100%;
			box-sizing: border-box;
		}


		body {
			min-height: 100%;
			margin: 0;
		}

		body {
			background: var(--blueish);
			color: var(--white);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		input {
			display: none;
		}

		input+label {
			display: flex;
			align-items: center;
			width: 180px;
			height: 90px;
			border-radius: 50px;
			background: var(--black);
			padding: 0 5px;
			cursor: pointer;
		}

		input:checked+label {
			animation: shake 1s forwards 1;
		}

		label>span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: var(--white);
		}

		label>span,
		label>span::before {
			transition: all 400ms ease;
			transition-delay: 100ms;
		}

		label>span::before {
			display: block;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: radial-gradient(circle at top left, rgb(255, 188, 0) 10%, rgb(255, 130, 57));
			content: '';
			animation: eggy 15s linear infinite;
		}

		label>span::after {
			width: 15px;
			height: 16px;
			border-top: 3px solid rgb(255, 255, 255);
			content: '';
			display: block;
			border-radius: 50%;
			position: absolute;
			transform: translate(-35%, -25%) rotate(-45deg);
		}

		input:checked+label>span {
			transform: translateX(90px);
			background: rgb(183, 183, 183);
		}

		input:checked+label>span::before {
			opacity: 0.3;
		}

		input:checked+label>span::after {
			opacity: 0;
		}

		.flip {
			animation: flip 1s forwards 1;
		}

		.unflip {
			animation: unflip 1s forwards 1;
		}

		@keyframes flip {
			from {
				transform: rotateY(0) translateX(0);
			}

			to {
				transform: rotateY(180deg) translateX(-90px);
			}
		}

		@keyframes unflip {
			from {
				transform: translateX(90px);
			}

			to {
				transform: translateX(0);
			}
		}

		@keyframes shake {

			0%,
			20% {
				transform: translateX(-8px);
			}

			10%,
			30%,
			100% {
				transform: translateX(0);
			}
		}

		/* 蛋黄来自： from https://codepen.io/madmax_furycode/pen/EdvZMj */
		@keyframes eggy {
			0% {
				border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
			}

			10% {
				border-radius: 39% 61% 38% 62% / 53% 54% 46% 47%;
			}

			20% {
				border-radius: 56% 44% 52% 48% / 57% 35% 65% 43%;
			}

			30% {
				border-radius: 41% 59% 45% 55% / 33% 56% 44% 67%;
			}

			40% {
				border-radius: 46% 54% 60% 40% / 55% 74% 26% 45%;
			}

			50% {
				border-radius: 44% 56% 22% 78% / 31% 74% 26% 69%;
			}

			60% {
				border-radius: 31% 69% 32% 68% / 31% 71% 29% 69%;
			}

			70% {
				border-radius: 44% 56% 60% 40% / 63% 36% 64% 37%;
			}

			80% {
				border-radius: 46% 54% 38% 62% / 44% 48% 52% 56%;
			}

			90% {
				border-radius: 66% 34% 57% 43% / 49% 51% 49% 51%;
			}

			100% {
				border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
			}
		}
	</style>
	<body>
		<input id="egg-toggle" type="checkbox" />
		<label for="egg-toggle"><span id="egg"></span></label>
	</body>
	<script>
		let toggle = document.querySelector('#egg-toggle')
		// 原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()
		toggle.addEventListener('click', (event) => {
			if (!egg.classList.contains('flip') && !egg.classList.contains('unflip')) {
				egg.classList.add('flip')
			} else {
				egg.classList.toggle('flip')
				egg.classList.toggle('unflip')
			}
		})
	</script>
</html>
